<template>
  <div class="main-container">
    <div class="gb-banner">
      <swiper :options="swiperOption" ref="swiperBanner">
        <swiper-slide class="flex-box" v-for="(item,index) in BannerLists" :key="index"><img :src="$BASEPATH+item.path" /></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
    <div class="gb-labels">
      <div class="laba-icon">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-gb-laba"></use>
        </svg>
      </div>
      <div class="scroll-laba" ref="scrollLaba">
        <ul :style="{ transform: 'translateX(' + scrollLen + 'px)'}" ref="scrollUlA"> 
          <li>印加果温润保湿面膜印加果温润保湿面膜印加果温润保湿面膜opuouoihb</li>
          <li>印加果温润保湿面膜印加果温润保湿面膜印加果温润保湿面膜</li>
          <li>印加果温润保湿面膜印加果温润保湿面膜印加果温润保湿面膜ss</li>
        </ul>
        <ul :style="{ transform: 'translateX(' + (scrollLen + scrollWidth)+'px)'}" ref="scrollUlB">
          <li>印加果温润保湿面膜印加果温润保湿面膜印加果温润保湿面膜opuouoihb</li>
          <li>印加果温润保湿面膜印加果温润保湿面膜印加果温润保湿面膜</li>
          <li>印加果温润保湿面膜印加果温润保湿面膜印加果温润保湿面膜ss</li>
        </ul>
      </div>
    </div>
    <div class="gb-hotlist">
      <div class="lists-left">
        <div class="lists-left-box flex-box">
          <img src="@/assets/img/gb-new_03a.png" />
          <div class="list-main">
            <h4>热门推荐</h4>
            <h5>印加果温润保湿面膜<br/><span>温和保湿 水润滋养 孕产妇可用</span></h5>
            <p>售价 <span>￥168</span></p>
          </div>
        </div>
      </div>
      <div class="lists-right">
        <div class="lists-right-p1">
          <div class="lists-right-box flex-box">
            <img src="@/assets/img/gb-new_03b.png" />
            <div class="list-main">
              <h4>超值折扣</h4>
              <h5>小米米粉3袋<br/><span>拒绝麦麸过敏 营养定制</span></h5>
              <p>促销价 <span>￥46.2</span></p>
            </div>
          </div>
        </div>
        <div class="lists-right-p2">
          <div class="lists-right-box flex-box">
            <img src="@/assets/img/gb-new_03c.png" />
            <div class="list-main">
              <h4>人气单品</h4>
              <h5>优美达益畅<br/><span>益生菌压片糖果</span></h5>
              <p>售价 <span>￥188</span></p>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="list-new">
        <div class="list-new-content flex-box">
          <img src="@/assets/img/gb-new_03d.png" />
          <div class="list-new-main">
            <h4>新品推荐</h4>
            <p>益舒益生菌固体饮料</p>
          </div>
          <div class="list-new-link flex-box" >
            <p>立即<br />进入</p>
            <p>〉</p>
          </div>
        </div>
      </div> -->
    </div>
    <div class="gb-navlist">
      <ul>
        <li v-for = "(item,index) in navLists" :key="index">
          <img v-lazy="require('@/assets/img/' + item.img)"/>
          <p>{{item.name}}</p>
        </li>
      </ul>
    </div>
    <HotParts :PartLists = "bgMain"></HotParts>
    <div class="gb-linkshall">
      <img src="@/assets/img/gb-new_17.png" />
    </div>
    <div class="gb-copyright">
      <p>Copyright ©2018华大基因 All Rights Reserved</p>
      <!-- <img src="@/assets/img/govicon_621.png" /> -->
    </div>
  </div>
</template>

<script>
import HotParts from '@/components/Home/hot-parts.vue'
// @ is an alias to /src
export default {
  name: 'mallIndex',
  data() {
    return {
      BannerLists: '',
      scrollWidth: '',
      scrollLen: 0,
      ableScroll: true,
      scro: '',
      swiperOption: {
        mousewheel: true,
        loop: true,
        pagination: {
          el: '.swiper-pagination'
        },
        autoplay: true
      },
      navLists: [
        {
          name: '益生菌专家',
          img: 'icon-gbnav_03.png'
        },
        {
          name: '健康杂粮',
          img: 'icon-gbnav_05.png'
        },
        {
          name: '营养食品',
          img: 'icon-gbnav_07.png'
        },
        {
          name: '美颜护肤',
          img: 'icon-gbnav_09.png'
        },
        {
          name: '甄选滋补品',
          img: 'icon-gbnav_11.png'
        },
        {
          name: '冲泡茶饮',
          img: 'icon-gbnav_18.png'
        },
        {
          name: '健康食用油',
          img: 'icon-gbnav_19.png'
        },
        {
          name: '基因检测',
          img: 'icon-gbnav_20.png'
        },
        {
          name: '亲子鉴定',
          img: 'icon-gbnav_21.png'
        },
        {
          name: '小米营养',
          img: 'icon-gbnav_22.png'
        }
      ],
      bgMain: ''
    }
  },
  components: {
    HotParts
  },
  props: ['isMallStaff'],
  computed: {
    swiperBanner() {
      return this.$refs.swiperBanner.swiper
    }
  },
  methods: {
    scrollLe() {
      this.scrollLen--
      if (this.scrollLen + this.scrollWidth == 0) {
        this.scrollLen = 0
      }
    }
  },
  created() {
    this.$API.getIndexBanner().then(data => {
      console.log(data)
      if (data.flag) {
        this.BannerLists = data.data[0].imgs
      }
    })
    this.$API.getIndexLists().then(data => {
      console.log(data)
      this.bgMain = data.data
      console.log(data.data[0].allList[0].img.path)
      // if (data.flag) {
      //   this.BannerLists = data.data[0].imgs
      // }
    })
  },
  mounted() {
    // this.$axios
    //   .get('/data/index-lists.json')
    //   .then(data => {
    //     // console.log(data)
    //     this.bgMain = data.data.result.RL
    //   })
    //   .catch(err => {
    //     console.log(err)
    //   })
    // 公告栏滚动
    this.scrollWidth = this.$refs.scrollUlA.offsetWidth
    this.scro = setInterval(this.scrollLe, 25)
  }
}
</script>
<style scoped lang="scss">
.main-container {
  padding-top: 64px;
  .gb-banner {
    width: 100%;
    padding-bottom: 40%;
    position: relative;
    background: #fff url('../../assets/img/loading-gene-s.gif') center no-repeat;
    background-size: 36px;
    .swiper-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      .swiper-slide {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }
      img {
        width: 100%;
        // border-radius: r(12);
        // overflow: hidden;
        // box-shadow: 0 0 8px rgba(0,0,0,0.1);
      }
      .swiper-slide-active {
        img {
          width: 100%;
        }
      }
    }
  }
  .gb-labels {
    width: 100%;
    height: 28px;
    background: #fff;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
    .laba-icon {
      width: 24px;
      height: 28px;
      font-size: 18px;
      line-height: 28px;
      float: left;
    }
    .scroll-laba {
      width: calc(100% - 24px);
      height: 28px;
      line-height: 28px;
      float: left;
      overflow-y: hidden;
      box-sizing: border-box;
      overflow-x: hidden;
      position: relative;
      ul {
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        white-space: nowrap;
        li {
          padding: 0 12px;
          display: inline-block;
          white-space: nowrap;
        }
      }
    }
  }
  .gb-hotlist {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0px 6px 4px 6px;
    .list-main {
      text-align: left;
      h4 {
        font-size: 14px;
        color: #fff;
        position: absolute;
        line-height: 18px;
        left: 4px;
        top: 0;
        margin-bottom: 2px;
        background-size: 100%;
      }
      h5 {
        font-size: 12px;
        color: #fff;
        line-height: 14px;
        margin-bottom: 2px;
        opacity: 0.8;
        span {
          font-size: 10px;
          color: #1c93d0;
          margin-top: 3px;
          line-height: 12px;
          margin-bottom: 3px;
          display: inline-block;
        }
      }
      p {
        font-size: 10px;
        display: inline-block;
        border-radius: 100px;
        padding: 3px;
        padding-left: 6px;
        padding-right: 6px;
        background: hsla(0, 0, 100, 0.5);
        span {
          color: #ff6363;
        }
      }
    }
    .lists-left,
    .lists-right {
      width: 50%;
      float: left;
      height: 156px;
    }
    .lists-left {
      position: relative;
      box-sizing: border-box;
      padding-right: r(3);
      h4 {
        padding: 5px 10px 5px 6px;
        background: url('../../assets/img/bg-a001.png') top right no-repeat;
      }
      .lists-left-box {
        border-radius: 6px;
        height: 100%;
        overflow: hidden;
        width: 100%;
        background: -webkit-linear-gradient(left, #85b4e9, #7dc4e8); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #85b4e9, #7dc4e8); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #85b4e9, #7dc4e8); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #85b4e9, #7dc4e8); /* 标准的语法 */
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
      }
      img {
        width: 86px;
        float: left;
      }
      .list-main {
        width: 90px;
        float: left;
        margin-left: 3px;
      }
    }
    .lists-right-p1,
    .lists-right-p2 {
      width: 100%;
      float: left;
      height: 50%;
      position: relative;
      box-sizing: border-box;
      img {
        width: 50px;
        margin-top: 12px;
      }
      .lists-right-box {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        position: relative;
      }
      .list-main {
        width: 90px;
        margin-left: 19px;
      }
      h4 {
        line-height: 15px;
        padding: 2px 12px 2px 6px;
      }
    }
    .lists-right-p1 {
      padding-left: 2px;
      padding-bottom: 2px;
      .lists-right-box {
        background: -webkit-linear-gradient(left, #efc690, #f8e07e); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #efc690, #f8e07e); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #efc690, #f8e07e); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #efc690, #f8e07e); /* 标准的语法 */
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
      }
      h4 {
        background: url('../../assets/img/bg-a003.png') top right no-repeat;
      }
    }
    .lists-right-p2 {
      padding-left: 2px;
      padding-top: 2px;
      .lists-right-box {
        background: #a6c7e4;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
      }
      h4 {
        background: url('../../assets/img/bg-a002.png') top right no-repeat;
      }
    }
    .list-new {
      width: 100%;
      box-sizing: border-box;
      height: 85px;
      float: left;
      margin-top: 9px;
      .list-new-content {
        width: 100%;
        height: 100%;
        border-radius: 6px;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
        background: -webkit-linear-gradient(left, #a461f7, #85d6ff);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #a461f7, #85d6ff); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #a461f7, #85d6ff);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #a461f7, #85d6ff); /* 标准的语法 */
        img {
          width: 85px;
        }
        .list-new-main {
          color: #fff;
          h4 {
            font-size: 21px;
            line-height: 21px;
            margin-bottom: 6px;
          }
          p {
            font-size: 12px;
          }
        }
        .list-new-link {
          width: 58px;
          height: 58px;
          border-radius: 100%;
          border: 1px solid #fff;
          text-align: center;
          box-sizing: border-box;
          padding-left: 6px;
          p {
            display: inline-block;
            color: #fff;
            font-size: 16px;
          }
        }
      }
    }
  }
  .gb-navlist {
    width: 100%;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
    ul {
      display: block;
      width: 100%;
      overflow: hidden;
      padding-top: 4px;
      padding-bottom: 8px;
      li {
        width: 20%;
        float: left;
        text-align: center;
        padding-top: 6px;
        padding-bottom: 10px;
        img {
          width: 40px;
          margin-bottom: 3px;
        }
        p {
          font-size: 12px;
          color: #333;
        }
      }
    }
  }
  .gb-linkshall {
    width: 100%;
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
    img {
      width: 100%;
      border-radius: 6px;
      overflow: hidden;
    }
  }
  .gb-copyright {
    text-align: center;
    padding-top: 12px;
    padding-bottom: 10px;
    p {
      font-size: 12px;
      color: #999;
      padding-bottom: 6px;
    }
    img {
      width: 30px;
    }
  }
}
</style>
